[gulp]性能优化

参考:

使用gulp插件加速hexo博客

Hexo博客使用gulp压缩静态资源

使用gulp以及插件来压缩html/css/js/image等静态资源,加快博客访问速度

gulp在版本4.0.0前后针对JS语法处理有区别,当前使用最新版本v4.0.2

下载

下载gulp以及相关模块

$ npm install gulp -g
$ npm install --save gulp gulp-cli gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-clean-css gulp-uglify gulp-imagemin
# 解决GulpUglifyError: unable to minify JavaScript
$ npm install babel-core@6.26.3 --save
$ npm install gulp-babel@7.0.1 --save
$ npm install babel-preset-es2015@6.24.1 --save
# gulp-babel 取消严格模式方法("use strict")
$ npm install babel-plugin-transform-remove-strict-mode --save
  • gulp-htmlclean:清理html
  • gulp-htmlmin:压缩html
  • gulp-minify-css:压缩css
  • gulp-clean-css:清理css
  • gulp-uglify:混淆js
  • gulp-imagemin:压缩图片

当前版本

$ gulp -v
CLI version: 2.2.0
Local version: 4.0.2

配置

在当前路径编辑gulpfile.js文件

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var babel = require('gulp-babel');

// 压缩css文件
gulp.task('minify-css', function (done) {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
    done();
});

// 压缩html文件
gulp.task('minify-html', function (done) {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'));
    done();
});

// 压缩js文件
gulp.task('minify-js', function (done) {
    return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
        .pipe(babel({
            //将ES6代码转译为可执行的JS代码
            presets: ['es2015'] // es5检查机制
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
    done();
});

// 压缩 public/images 目录内图片(Version<3)
// gulp.task('minify-images', function () {
//     gulp.src('./public/images/**/*.*')
//         .pipe(imagemin({
//             optimizationLevel: 5, //类型:Number  默认:3  取值范围:0-7(优化等级)
//             progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
//             interlaced: false, //类型:Boolean 默认:false 隔行扫描gif进行渲染
//             multipass: false, //类型:Boolean 默认:false 多次优化svg直到完全优化
//         }))
//         .pipe(gulp.dest('./public/images'));
// });

// 压缩 public/images 目录内图片(Version>3)
gulp.task('minify-images', function (done) {
    gulp.src('./public/images/**/*.*')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(gulp.dest('./public/images'));
    done();
});

//4.0以前的写法 
//gulp.task('default', [
//  'minify-html', 'minify-css', 'minify-js', 'minify-images'
//]);
//4.0以后的写法
// 执行 gulp 命令时执行的任务
gulp.task('default', gulp.series(gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images')), function () {
    console.log("----------gulp Finished----------");
    // Do something after a, b, and c are finished.
});

新建.babelrc文件:

{
    'presets': ['es2015'],
    "plugins": ["transform-remove-strict-mode"]
}

执行

在运行完hexo generate后就可以执行gulp

$ gulp
[09:52:35] Using gulpfile ~/Documents/zjzstu.github.io/blogs/gulpfile.js
[09:52:35] Starting 'default'...
[09:52:35] Starting 'minify-html'...
[09:52:35] Starting 'minify-css'...
[09:52:35] Starting 'minify-js'...
[09:52:35] Starting 'minify-images'...
[09:52:35] Finished 'minify-images' after 134 ms
[09:52:38] Finished 'minify-css' after 3.29 s
[09:52:39] Finished 'minify-js' after 4.23 s
[09:52:39] Finished 'minify-html' after 4.51 s
[09:52:39] Finished 'default' after 4.52 s
[09:52:53] gulp-imagemin: Minified 0 images

再执行hexo server即可

font-awesome加载失败

gulp压缩完成后,如果图标显示出错,说明font-awesome加载失败

参考小图标不显示 [check hexo-filter-optimize, and CDN configs maybe] 添加插件后fontawesome图标失效 #8

有两种解决方案(我使用第二种):

  1. 取消css压缩

  2. 使用cdn

修改主题_config.yml,添加

fontawesome: https://cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css